<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>08_表单输入绑定</title>
    </head>
    <body>
        <!--
1. 使用v-model(双向数据绑定)自动收集数据
  text/textarea
  checkbox
  radio
  select
-->
        <div id="demo">
            <form action="/xxx">
                <label for="useName">姓名：</label>
                <input type="text" id="useName" v-model="user.useName" /><br />
                <label for="password" >密码：</label>
                <input type="password" id="password" v-model="user.password" /><br />

                <label>性别：</label>
                <input type="radio" id="mail" v-model='user.sex' value='男'/>
                <label for="mail" value="男">男</label>
                <input type="radio" id="famail" value="女" v-model='user.sex' />
                <label for="famail">女</label><br />

                <span>爱好</span>
                <!-- 复选框 -->
                <input type="checkbox" v-model='user.hobby' value='lq'/>
                <label for="">篮球</label>
                <input type="checkbox" v-model='user.hobby' value='zq'>
                <label for="">足球</label>
                <input type="checkbox" v-model='user.hobby' value='pqq'>
                <label for="">乒乓球</label><br>

                <!--下拉框 -->
                <span>城市：</span>
                <select name="city" id="" v-model='user.city' value='sh'>
                    <option value="wh">武汉</option>
                    <!-- 为啥默认选项无效 -->
                    <option value="sz" selected>深圳</option>
                    <option value="sh">上海</option>
                </select><br>
                <!-- 文本域 -->
                <label for='intro'>介绍</label>
                <textarea  id="intro" cols="30" rows="10" v-model='user.intro' ></textarea>
                <button @click.prevent='submit'>提交</button>
            </form>
        </div>

        <script type="text/javascript" src="../js/vue.js"></script>
        <script t:ype="text/javascript">
        new Vue({
            el:'#demo',
            data:{
                user:{
                    useName:'',
                    password:'',
                    sex:'男',
                    hobby:[],
                    city:'sz',
                    intro:'',

                }
            },
            methods:{
                submit(){
                    console.log(this.user);
                    
                }
            }
        })
        </script>
    </body>
</html>
